import { useReactFlow } from "@xyflow/react";
import { useEffect, useRef, useState } from "react";

interface SubtitleProps {
    title: string;
    id: string;
    imgUrl: string;
    onBlur?: (title:string) => void;
}

// 标题
export default function Subtitle(props: SubtitleProps) {
    const { title, id, imgUrl, onBlur } = props
    const editableRef = useRef(null);
    const { setNodes } = useReactFlow();

    useEffect(() => {
        if (editableRef.current) {
            editableRef.current.innerText = title;
        }
    }, [title]);

    return <div style={{ display: "flex" }}>
        <img src={imgUrl} style={{ height: 30 }} />
        <div contentEditable
            className="text-[#485468] nodrag editable"
            ref={editableRef}
            onBlur={(event) => {
                const newTitle = event.target.innerText;
                setNodes((nodes) => {
                    const node = nodes.find(node => node.id == id)
                    node.data.title = newTitle
                    return [...nodes]
                })
                onBlur(newTitle)
            }}
            style={{ marginLeft: 10, marginTop: 3, minWidth: 80, maxWidth: 200, overflow: 'hidden', outline: 'none', cursor: "auto" }} />
    </div>
}